<!-- 模板 -->
<template>
  <div class="My_foots">
    <van-tabbar route active-color="red">
      <van-tabbar-item
        :icon="item.icon"
        v-for="item in list"
        :key="item.id"
        :to="item.path"
        >{{ item.title }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
// import request from '../utils/request.js'
export default {
  name: "",
  data() {
    return {
      list: [
        {
          id: 1,
          icon: "wap-home-o",
          title: "首页",
          active: true,
          path: "/index",
        },
        {
          id: 2,
          icon: "apps-o",
          title: "分类",
          active: false,
          path: "/lise",
        },
        {
          id: 3,
          icon: "service-o",
          title: "服务",
          active: false,
          path: "/serve",
        },
        {
          id: 4,
          icon: "cart-o",
          title: "购物车",
          active: false,
          path: "/cart",
        },
        {
          id: 5,
          icon: "user-circle-o",
          title: "我的",
          active: false,
          path: "/info",
        },
      ],
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.My_foots {
  // z-index: 9999;
  // position: fixed;
  // max-width: 100%;
  // height: 0.96rem;
  // bottom: 0;
  // left: 0;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // padding: 0.1rem;
  // background-color: #fff;
  .van-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.96rem;
    /deep/.van-tabbar-item {
      flex: 1;
    }
    /deep/.van-icon {
      font-size: 0.4rem;
      margin-bottom: 0.05rem;
    }
    /deep/.van-tabbar-item__text {
      font-size: 0.24rem;
    }
  }
}
</style>
